<template>
	<view class="content">
		<view class="contetTop">
			<image :src="currentData.cover"></image>
			<view class="title">
				<view class="state" :class="activityStatus()">{{ activityStatusText() }}</view>
				<!-- <view class="state2 state" v-if="data.state == 2">进行中</view>
				<view class="state3 state" v-if="data.state == 3">已结束</view> -->
				<view class="name">
					{{ currentData.title }}
				</view>
			</view>
			<view class="activityTime">
				<up-icon name="clock-fill" size="14"></up-icon>
				<view class="timeTitle">
					活动日期：
				</view>
				<view class="time">
					{{ formatTime(currentData.activity_start_time) }} ~ {{ formatTime(currentData.activity_end_time) }}
				</view>
			</view>
			<view class="activityTime">
				<up-icon name="clock-fill" size="14"></up-icon>
				<view class="timeTitle">
					报名日期：
				</view>
				<view class="time">
					{{ formatTime(currentData.registration_start_time) }} ~ {{
						formatTime(currentData.registration_end_time) }}
				</view>
			</view>
			<view class="address">
				<up-icon name="map-fill" size="14"></up-icon>
				<view class="addressTitle">
					{{ currentData.activity_location || '暂未填写' }}
				</view>
			</view>
			<view class="iphone">
				<up-icon name="phone-fill" size="14"></up-icon>
				<view class="iphoneTitle">
					联系方式：{{ currentData.contact_person }} &nbsp; {{ currentData.contact_phone }}
				</view>
			</view>
		</view>
		<view class="contentBottom">
			<up-parse :content="currentData.content"></up-parse>
		</view>

		<!-- <title title="活动详情" :more="false"></title>

		<view class="content">
            <up-parse :content="currentData.content"></up-parse>
        </view> -->
	</view>
</template>

<script>
import dayjs from 'dayjs';

import title from '@/components/title/index.vue';
export default {
	components: {
		title
	},
	data() {
		return {
			data: {
				img: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				title: '园区当月活动',
				state: 1,
				concise: 'qwertyuiosxcvbnsdhjgsdfhjsdfjsdfjsdfsdfsdfsdfsdsdjkfhsdjkfhsdjkhfsjdhfsdfhsdhj',
				activityTime: ['2024-11-19 16:09', '2024-11-19 19:06'],
				address: '辽宁省大连市高新园区火炬路26号创业大厦',
				name: '高先生',
				iphone: 18866668888,
				content: '<p>这是一个动态的111111111111111111111111设计费卡视角菲尼萨卡菲纳 <strong>HTML 内容</strong>。</p>'
			},
			currentData: {},
			isTitle: false,
		};
	},
	onLoad() {
		// this.currentData = uni.getStorageSync('currentData')
		const { item, isTitle } = uni.getStorageSync('currentData');
		this.currentData = item;
		this.isTitle = isTitle;
	},
	methods: {
		formatTime(time) {
			if (time) {
				return dayjs(time).format('YYYY年MM月DD日');
			} else {
				return '--'
			}
		},
		activityStatusText() {
			const now = dayjs(); // 获取当前时间
			const startTime = dayjs(this.currentData.activity_start_time);
			const endTime = dayjs(this.currentData.activity_end_time);

			if (!this.currentData.activity_start_time || !this.currentData.activity_end_time) {
				return "已结束";
			} else if (now.isBefore(startTime)) {
				return "未开始";
			} else if (now.isAfter(endTime)) {
				return "已结束";
			} else {
				return "进行中";
			}
		},
		activityStatus() {
			const now = dayjs(); // 获取当前时间
			const startTime = dayjs(this.currentData.activity_start_time);
			const endTime = dayjs(this.currentData.activity_end_time);

			if (!this.currentData.activity_start_time || !this.currentData.activity_end_time) {
				return "state3";
			} else if (now.isBefore(startTime)) {
				return 'state1';
			} else if (now.isAfter(endTime)) {
				return 'state3';
			} else {
				return 'state2';
			}
		},
	}
}
</script>

<style lang="scss" scoped>
.content {
	// padding: 25rpx 25rpx;
	box-sizing: border-box;
	background-color: #e6e6e6;
}

.contentBottom {
	margin-top: 20rpx;
	padding: 25rpx;
	background-color: #fefefe;

	.text {
		font-size: 25rpx;
		color: #000;
	}
}

.contetTop {
	background-color: #fefefe;
	padding: 0 25rpx 25rpx 25rpx;
	border-radius: 10rpx;

	image {
		width: 100%;
		height: 300rpx;
	}

	.title {
		margin: 20rpx 0 10rpx 0;
		display: flex;
		align-items: center;

		.state {
			width: 100rpx;
			padding: 8rpx;
			font-size: 22rpx;
			border-radius: 10rpx;
			text-align: center;
		}

		.state1 {
			border: 2rpx #8F8F8F solid;
			color: #8f8f8f;
		}

		.state2 {
			border: 2rpx #25BA42 solid;
			color: #25BA42;
		}

		.state3 {
			border: 2rpx #FF3B30 solid;
			color: #FF3B30;
		}

		.name {
			width: calc(100% - 100rpx);
			color: #000;
			font-size: 30rpx;
			margin-left: 15rpx;
			font-weight: 600;
		}
	}

	.activityTime {
		margin-top: 15rpx;
		display: flex;
		align-items: center;
		color: #666666;

		.timeTitle {
			margin-left: 10rpx;
			font-size: 26rpx;
		}

		.time {
			font-size: 24rpx;
		}
	}

	.address {
		margin-top: 15rpx;
		display: flex;
		color: #666666;

		.addressTitle {
			margin-left: 10rpx;
			font-size: 26rpx;
		}
	}

	.iphone {
		margin-top: 15rpx;
		display: flex;

		.iphoneTitle {
			margin-left: 10rpx;
			color: #000;
			font-size: 30rpx;
			font-weight: 600;
		}

	}
}
</style>